<template>
  <div class="content_box">
    <div class="date_box">
      <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20240124/t9n03KLaD7GUSRbycfEv.png" alt="">
      <div class="nr">
          <p class="title">在杠小二打牌/台球攒星日历</p>
          <p class="title1">马上前去兑换吧</p>
          <div class="date">
            <ui-tmt-calendar
              :point-list="pointList" 
              :show="true" 
              @changeDate="changeDate"
            ></ui-tmt-calendar>
          </div>
      </div>
    </div>

    <div class="no_order" v-if="!msg.todayOrder">
      <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20240124/Q7gmh4pGpCT1ant0foYY.png" alt="">
      <div class="nr">
        <div class="left">
          <p class="name">今天还没有攒星值哦～</p>
          <p class="text">消费一场，即可获得1颗星</p>
        </div>
        <div class="right" @click="toHome">
          <p>去打一场</p>
          <img src="/static/images/jt.png" alt="">
        </div>
      </div>
    </div>

    <div class="my_star">
      <div class="title_box">
        <div>
          <p class="line"></p>
          <p class="title">您的星值</p>
        </div>
      </div>
      <div class="nr">
        <p class="num">{{msg.starValue}}</p>
        <div class="wz_box">
          <div class="left">
            <p class="text1" v-if="msg.difference"><img src="/static/images/dk_star.png" alt="">再消费<span>{{msg.difference}}</span>场即可兑换</p>
            <p class="text1" v-else><img src="/static/images/dk_star.png" alt="">已满足可兑换条件</p>
          </div>
          <p class="right">本期已获得<span>{{msg.obtained}}</span><img src="/static/images/dk_star.png" alt=""></p>
        </div>
      </div>
    </div>

    <div class="dh_list" v-if="userCouponList && userCouponList.length">
      <div class="title_box">
        <div>
          <p class="line"></p>
          <p class="title">我的兑换</p>
        </div>
        <p class="more" @click="more">查看更多<van-icon name="arrow" /></p>
      </div>
      <div class="list" v-for="(item,index) in userCouponList" :key="index">
        <div class="box">
          <p class="img">
            <van-image
                width="100%"
                height="100%"
                fit="cover"
                widthFix
                lazy-load
                :src="item.cardImg?item.cardImg[0]:''"
              />
          </p>
          <div class="right">
            <div class="msg">
              <p class="name">{{item.name}}</p>
              <p class="text1">兑换时长：<span>{{item.hours}}小时</span></p>
              <p class="text1" v-if="item.status == 0">请于 <span>{{item.expireTime}}</span> 前使用</p>
              <p class="text1" v-if="item.status == 1">已于 <span>{{item.expireTime}}</span> 前使用</p>
              <p class="text1" v-if="item.status == 2">已于 <span>{{item.expireTime}}</span> 前过期</p>
              <!-- <p class="text1" @click="zhankai(item,index)">详细信息<van-icon name="arrow-down" style="margin-left:4rpx;"/></p> -->
            </div>
            <p class="anniu" v-if="item.status == 0" @click="toRoom(item)">立即使用</p>
          </div>
          <img v-if="item.status == 1" src="/static/images/stamp1.png" alt="">
          <img v-if="item.status == 2" src="/static/images/stamp2.png" alt="">
        </div>
        <div class="text_text" v-if="item.isClick">
          <p>1.通过库底咖啡西夏程序app下单</p>
          <p>1.通过库底咖啡西夏程序app下单</p>
        </div>
      </div>
    </div>
    <div class="lanmu_box">
      <div class="box">
        <van-tabs v-model="active" @change="tabChange">
          <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div>
    
    <div class="dhhl_list">
      <div class="title_box">
        <p class="line"></p>
        <p class="title">兑换{{ param1.cardCouponIlk === 0?'桌台':'包间' }} <span>消耗对应星值，兑换相应{{ param1.cardCouponIlk === 0?'桌台':'包间' }}</span></p>
      </div>
      <div class="list_box">
        <div class="list" v-for="(item,index) in couponList" :key="index">
          <p class="img">
            <van-image
              width="100%"
              height="100%"
              fit="cover"
              widthFix
              lazy-load
              :src="item.cardImg?item.cardImg[0]:''"
            />
          </p>
          <p class="text">{{item.name}}</p>
          <p class="anniu on1" v-if="!item.receive" @click="noDuihuan">
            满<span>{{item.starVale}}</span>
            <img src="/static/images/dk_star.png" alt="">
            可兑换
          </p>
          <p v-else class="anniu on" @click="toDuihuan(item)">可兑换</p>
        </div>
        <!-- <div class="list">
          <p class="img"></p>
          <p class="text">杠小二4小时中包</p>
          <p class="anniu">
            满<span>4</span>
            <img src="/static/images/dk_star.png" alt="">
            可兑换
          </p>
        </div>
        <div class="list">
          <p class="img"></p>
          <p class="text">杠小二4小时中包</p>
          <p class="anniu on" @click="popShow = true">可兑换</p>
        </div> -->
      </div>
    </div>

    <!-- 兑换确认框 -->
    <div class="wifi_pop">
      <van-popup :show="popShow">
          <div class="box">
              <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20240124/wT6xHMgDNLzwt1qw6xfP.png"
                  alt="">
              <div class="nr">
                  <p class="name">兑换确认</p> 
                  <p class="text">您正在使用<span>{{popMsg.starVale}}</span><img src="/static/images/dk_star.png" alt="">兑换</p>
                  <p class="room_name">{{ dhTitle }}</p>
                  <div class="zhanghao">
                      <p>1.兑换成功后，您的账户将到账1张【{{ dhTitle }}兑换券】；</p>
                      <p>2.请确认您是否要兑换本券，星值兑换本券后将不支持退还。</p>
                    </div>
                    <van-button 
                      @click="submit"
                      :disabled="loading"
                      :loading="loading" 
                      loading-text="兑换中..."
                      type="primary"
                      color="#3d98f7"
                      custom-style="width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 50rpx;text-align: center;font-weight: 500;color: #fff;background:#00C200;border:none;font-size: 32rpx;font-family: PingFangSC-Regular, PingFang SC;margin-top:30rpx;"
                    >确认兑换</van-button>
              </div>
          </div>
          <p class="close" @click="popShow = false">
              <img src="/static/images/close1.png" alt="">
          </p>
      </van-popup>
    </div>

    
  </div>
</template>

<script>
import { 
  getToken,
  getUserPhone
} from "@/utils/auth";
import { Debounce } from "@/utils"
import { mapState } from 'vuex'
import { 
  getUserCardCouponPage,
  getUserStarRecord,
  getCardCouponPage,
  userGetCardCoupon,
  getCardCouponRoom
} from "@/api/index";
export default {
  data() {
    return {
      lanmu:[
       {name:'桌球',query:0},
       {name:'麻将',query:1},
     ],
      pointList:[],
      popShow:false,
      param:{
        current:1,
        size:2,
      },
      param1:{
        current:1,
        size:30,
        cardCouponIlk:0,
        cardType:0
      },
     userCouponList:[],
     couponList:[],
     msg:{},
     popMsg:{},
     loading:false,
     dhTitle:''
    };
  },
  computed: {
    ...mapState({
      storeId: state => state.user.storeId,
    })
  },
  methods: {
    tabChange(e){
      //console.log(e)
      const index = +e.mp.detail.index
      this.param1.cardCouponIlk=this.lanmu[index].query
      this.getCouponList()
    },

    more(){
      wx.navigateTo({
        url: `/pages/daka/list/main`,
      });
    },

    // 跳转房间列表
    toRoom:Debounce(function (item) {
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      this.$showLoading('加载中...')
      getCardCouponRoom({cardCouponId:item.cardCouponId}).then(res=>{
        if(res.statusCode == '00000'){
          setTimeout(() => {
            wx.hideLoading()
            wx.navigateTo({
              url: `/pages/mt/main?info=${JSON.stringify(res.data)}&state=1&cardCouponId=${item.cardCouponId}`,
            });
            this.loading = false
          }, 1000);
          
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },300),

    // 确认兑换
    submit:Debounce(function () {
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      this.$showLoading('兑换中...')
      this.loading = true
      userGetCardCoupon({cardCouponId:this.popMsg.id}).then(res=>{
        if(res.statusCode == '00000'){
          setTimeout(() => {
            wx.hideLoading()
            this.loading = false
            this.popShow = false
            this.$toast('已兑换')
            this.getStarMsg()
            this.getUserCouponList()
          }, 1000);
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })

      // wx.navigateTo({
      //   url: `/pages/mt/main?info=${JSON.stringify(res.data)}`,
      // });
    },300),

    // 不可兑换
    noDuihuan(){
      this.$toast('星值不足，在攒攒吧~')
    },

    // 兑换弹窗
    toDuihuan(item) {
      console.log(item)
      this.dhTitle = item.name
      this.popMsg = item
      this.popShow = true
    },

    changeDate(e){
      //console.log(e)
    },

    toHome(){
      wx.switchTab({
        url: '/pages/home/main',
      })
    },

    // 获取卡券列表
    getCouponList(){
      getCardCouponPage(this.param1).then(res=>{
        if(res.statusCode == '00000'){
          this.couponList = []
          this.couponList = res.data.records
        }
      })
    },

    // 获取攒星日期
    getStarMsg(){
      getUserStarRecord().then(res=>{
        if(res.statusCode == '00000'){
          this.msg = res.data
          this.pointList = res.data.userStarRecordList
          //console.log(this.msg.userStarRecordList)
        }
      })
    },

    // 用户领取的卡券
    getUserCouponList(){
      getUserCardCouponPage(this.param).then(res=>{
        if(res.statusCode == '00000'){
          res.data.records.map(item=>{
            item.isClick = false
          })
          this.userCouponList = res.data.records
        }
      })
    },

    //展开收缩
    zhankai(item,index){
      //console.log(item,index)
      if(!item.isClick){
        this.userCouponList[index].isClick = true
      }else{
        this.userCouponList[index].isClick = false
      }
    }
  },
  onShow(){
    if(!getToken()){
      wx.login({
        success:(res)=>{
          let code = res.code
          this.$store.dispatch("userLogin", code).then(res=>{
            if(res.statusCode == '00000'){
              this.getStarMsg()
              this.getUserCouponList()
              this.getCouponList()
            }
          })
        }
      })
    }else{
      this.getStarMsg()
      this.getUserCouponList()
      this.getCouponList()
    }
  },
  onLoad(options) {
    
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "kaiti";
  src: url("https://leciit.oss-cn-chengdu.aliyuncs.com/gxe/1636716444642429%281%29.ttf");
}
.content_box{
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom:30rpx;
  .date_box{
    width: 100%;
    position: relative;
    .bj{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      right:0;
    }
    .nr{
      position: relative;
      z-index: 10;
      .title{
        font-size: 60rpx;
        font-family: "kaiti";
        color: #111;
        text-align: center;
        padding-top:48rpx;
      }
      .title1{
        font-size: 48rpx;
        font-family: "kaiti";
        color: #111;
        text-align: center;
      }
      .date{
        margin-top:16rpx;
      }
    }
  }
  .no_order{
    margin:24rpx 30rpx;
    height: 130rpx;
    position: relative;
    .bj{
      width: 100%;
      height: 100%;
      position: absolute;
    }
    .nr{
      position: relative;
      height: 130rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      img{
        width: 32rpx;
        height: 28rpx;
        margin-left:12rpx;
      }
      .left{
        margin-left:24rpx;
        color:#fff;
        font-size: 32rpx;
        font-weight: 500;
        .text{
          margin-top:10rpx;
          color: rgba(255,255,255,0.9);
          font-size: 24rpx;
          text-align: left;
        }
      }
      .right{
        display: flex;
        align-items: center;
        margin-right:44rpx;
        font-size: 30rpx;
        font-weight: 500;
        color:#fff;
      }
    }
  }
  .my_star{
    margin:24rpx 30rpx;
    background: #fff;
    height: 158rpx;
    padding:0 24rpx 24rpx 24rpx;
    border-radius: 8rpx;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    .title_box{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 500;
      color: #111111;
      padding:24rpx 0 10rpx 0;
      .line{
        width: 6rpx;
        height: 30rpx;
        background: #00C200;
        border-radius: 4rpx;
        margin-right:16rpx;
      }
      div{
        display: flex;
        align-items: center;
      }
    }
    .nr{
      display: flex;
      align-items: baseline;
      img{
        width: 32rpx;
        height: 32rpx;
      }
      .num{
        font-size: 64rpx;
        font-weight: 500;
        color: #FF6600;
      }
      .wz_box{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .left{
        display: flex;
        .text1{
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #111111;
          img{
            margin:0 16rpx 0 4rpx;
          }
          span{
            color:#FF6600;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        height: 52rpx;
        padding:0 22rpx;
        background: rgba(0,0,0,0.05);
        border-radius: 24rpx;
        font-size:24rpx;
        color: #111111;
        span{
          margin:0 4rpx 0 8rpx;
          font-size:32rpx;
          color:#FF6600;
          font-weight: 500;
        }
      }
    }
  }
  .dh_list{
    margin:24rpx 30rpx;
    background: #fff;
    padding:0 24rpx 24rpx 24rpx;
    border-radius: 8rpx;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    .title_box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 500;
      color: #111111;
      padding:24rpx 0 30rpx 0;
      .line{
        width: 6rpx;
        height: 30rpx;
        background: #00C200;
        border-radius: 4rpx;
        margin-right:16rpx;
      }
      div{
        display: flex;
        align-items: center;
      }
      .more{
        font-size:24rpx;
        color:#999999;
        font-weight: 400;
      }
      
    }
    .list{
      position: relative;
      margin-bottom:26rpx;
      .text_text{
        font-size:20rpx;
        color:#999999;
        padding:20rpx 10rpx;
      }
      .box{
        display: flex;
      }
      &:last-child{
        margin-bottom:0;
      }
      .right{
        flex: 1;
        display: flex;
        justify-content: space-between;
      }
      .img{
        width: 180rpx;
        height: 180rpx;
       
        border-radius: 10rpx;
      }
      .msg{
        margin-left:16rpx;
        .name{
          font-weight: 500;
          font-size: 30rpx;
          color: #111111;
          margin-bottom:24rpx;
        }
        .text1{
          font-size: 22rpx;
          color: #999999;
          margin-top:14rpx;
          span{
            color: #111111;
          }
        }
      }
      .anniu{
        width: 122rpx;
        height: 46rpx;
        line-height: 46rpx;
        text-align: center;
        border:1px solid #aaa;
        color:#FF6600;
        font-size:22rpx;
        border:1px solid #FF6600;
        border-radius: 8rpx;
        margin-top:60rpx;
      }
      img{
        width: 148rpx;
        height: 144rpx;
        position: absolute;
        right:0;
        top:0;
      }
    }
  }
  .dhhl_list{
    margin:24rpx 30rpx;
    background: #fff;
    padding:0 24rpx 24rpx 24rpx;
    border-radius: 8rpx;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    .title_box{
      display: flex;
      align-items: center;
      font-size: 30rpx;
      font-weight: 500;
      color: #111111;
      padding:24rpx 0 30rpx 0;
      .line{
        width: 6rpx;
        height: 30rpx;
        background: #00C200;
        border-radius: 4rpx;
        margin-right:16rpx;
      }
      span{
        color:#333;
        font-size:24rpx;
      }
    }
    .list_box{
      display: flex;
      justify-content: space-between;
      flex-wrap:wrap;
      .list{
        width: 47%;
        height: 380rpx;
        background: #F6F6F6;
        border-radius: 16rpx;
        margin-bottom:30rpx;
        .img{
          width: 100%;
          height: 209rpx;
          border-top-right-radius: 16rpx;
          border-top-left-radius: 16rpx;
          background: rgba(0,0,0,0.05);
        }
        .text{
          font-size: 30rpx;
          font-weight: 500;
          color: #111111;
          text-align: center;
          padding:22rpx 0;
        }
        .anniu{
          width: 246rpx;
          height: 64rpx;
          background: #F9E7E3;
          border-radius: 8rpx;
          margin:0 auto;
          font-size: 26rpx;
          color: #111111;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          &.on{
            background: #FF6600;
            color:#fff;
          }
          &.on1{
            opacity: 0.8;
          }
          img{
            width: 30rpx;
            height: 30rpx;
            margin-right:8rpx;
          }
          span{
            font-size: 40rpx;
            font-weight: 500;
            color: #FF6600;
            margin-left:8rpx;
          }
        }
      }
    }
  }

  .wifi_pop {
        /deep/ .van-popup {
            background: none;
            width: 530rpx;
        }

        .box {
            width: 530rpx;
            height: 804rpx;
            position: relative;

            .bj {
                width: 530rpx;
                height: 804rpx;
                top: 0;
                left: 0;
                position: absolute;
            }

            .nr {
                position: relative;
                z-index: 10;
                width: 80%;
                margin: 0 auto;
                top: 180rpx;
                .name{
                  text-align: center;
                  font-size: 36rpx;
                  font-weight: 500;
                  color: #000000;
                  margin-bottom:20rpx;
                }
                .text{
                  font-size: 28rpx;
                  color: #000000;
                  text-align: center;
                  margin-bottom:20rpx;
                  img{
                    width: 24rpx;
                    height: 24rpx;
                    margin-right:4rpx;
                  }
                  span{
                    font-size:40rpx;
                    color:#FF6600;
                    margin-left:8rpx;
                  }
                }
                .room_name{
                  font-size: 30rpx;
                  font-weight: 500;
                  color: #00C200;
                  text-align: center;
                  margin-bottom:34rpx;
                }
                .zhanghao {
                    background: #F9F9F9;
                    font-size: 26rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    padding: 22rpx;
                    border-radius: 16rpx;
                    line-height: 42rpx;
                }
            }

            .anniu {
                height: 80rpx;
                line-height: 80rpx;
                background: #00C200;
                border-radius: 40rpx;
                margin-top: 30rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
            }

            .nr1 {
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding-bottom: 48rpx;
                position: relative;
                top: 280rpx;
            }

            button::after {
                border: none;
            }

            button {
                background: none;
                color: #222;
                margin: 0;

                .img {
                    width: 160rpx;
                    height: 160rpx;
                    background: #F8F8F8;
                    border-radius: 16rpx;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;

                    .img1 {
                        width: 70rpx;
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 56rpx;
                            height: 48rpx;
                        }
                    }

                    .img2 {
                        width: 70rpx;
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 42rpx;
                            height: 56rpx;
                        }
                    }
                }

                .text {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    color: #111111;
                    text-align: center;
                }
            }
        }

        .close {
            width: 64rpx;
            height: 64rpx;
            margin: 32rpx auto 0 auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.lanmu_box{
   .box{
     background: #fff;
     margin: 0 30rpx;
   }
   /deep/ .van-tab{
     color:#666666;
     font-size:30rpx;
   }
   /deep/ .van-tabs__line{
     background: #00C200;
   }
   /deep/ .van-tab--active{
     color:#00C200;
     font-weight: bold;
   }
 }
</style>